const vueSticky = {};
let listenAction;
vueSticky.install = Vue => {
	Vue.directive("sticky", {
		inserted(el, binding) {
			const params = binding.value || {};
			const stickyTop = params.stickyTop || 0;
			const zIndex = params.zIndex || 1000;
			const elStyle = el.style;

			elStyle.position = "-webkit-sticky";
			elStyle.position = "sticky";
			// if the browser support css sticky（Currently Safari, Firefox and Chrome Canary）
			// if (~elStyle.position.indexOf('sticky')) {
			//     elStyle.top = `${stickyTop}px`;
			//     elStyle.zIndex = zIndex;
			//     return
			// }
			const elHeight = el.getBoundingClientRect().height;
			const elWidth = el.getBoundingClientRect().width;
			elStyle.cssText = `top: ${stickyTop}px; z-index: ${zIndex}`;

			const parentElm = el.parentNode || document.documentElement;
			const placeholder = document.createElement("div");
			placeholder.style.display = "none";
			placeholder.style.width = `${elWidth}px`;
			placeholder.style.height = `${elHeight}px`;
			parentElm.insertBefore(placeholder, el);

			let active = false;

			const getScroll = (target, top) => {
				const prop = top ? "pageYOffset" : "pageXOffset";
				const method = top ? "scrollTop" : "scrollLeft";
				let ret = target[prop];
				if (typeof ret !== "number") {
					ret = window.document.documentElement[method];
				}
				return ret;
			};

			const sticky = () => {
				if (active) {
					return;
				}
				if (!elStyle.height) {
					elStyle.height = `${el.offsetHeight}px`;
				}

				elStyle.position = "fixed";
				elStyle.width = `${elWidth}px`;
				placeholder.style.display = "inline-block";
				active = true;
			};

			const reset = () => {
				if (!active) {
					return;
				}

				elStyle.position = "";
				placeholder.style.display = "none";
				active = false;
			};

			const check = () => {
				const scrollTop = getScroll(window, true);
				const offsetTop = el.getBoundingClientRect().top;
				if (offsetTop < stickyTop) {
					sticky();
				} else {
					if (scrollTop < elHeight + stickyTop) {
						reset();
					}
				}
			};
			listenAction = () => {
				check();
			};

			window.addEventListener("scroll", listenAction);
		},

		unbind() {
			window.removeEventListener("scroll", listenAction);
		}
	});
};

export default vueSticky;
